<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的宿舍</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="logo">我的宿舍</div>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#members">宿舍成员</a></li>
                <li><a href="#life">宿舍生活</a></li>
                <li><a href="#stories">宿舍故事</a></li>
                <li><a href="#about">关于我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- 轮播图 -->
    <section class="banner">
        <img src="banner1.jpg" alt="宿舍环境" class="active">
        <img src="banner2.jpg" alt="室友合照">
        <img src="banner3.jpg" alt="精彩活动">
    </section>

    <!-- 主要内容区域 -->
    <main>
        <!-- 宿舍简介 -->
        <section id="introduction">
            <h2>宿舍简介</h2>
            <p>我们是[宿舍号]的一群大学生，秉持着团结友爱、积极向上的理念，共同打造温馨的宿舍小窝。</p>
        </section>

        <!-- 最新动态 -->
        <section id="latest-news">
            <h2>最新动态</h2>
            <ul>
                <li>活动：本周末宿舍聚餐！</li>
                <li>趣事：小李半夜说梦话，太逗啦！</li>
                <li>通知：下周进行宿舍卫生检查，请大家做好准备。</li>
            </ul>
        </section>

        <!-- 精彩瞬间 -->
        <section id="highlights">
            <h2>精彩瞬间</h2>
            <div class="gallery">
                <img src="image1.jpg" alt="宿舍趣事">
                <img src="image2.jpg" alt="活动合照">
                <img src="image3.jpg" alt="学习场景">
            </div>
        </section>

        <!-- 友情链接 -->
        <section id="friend-links">
            <h2>友情链接</h2>
            <ul>
                <li><a href="https://www.school.edu.cn">学校官网</a></li>
                <li><a href="https://www.college.edu.cn">学院网站</a></li>
                <li><a href="https://www.otherdorm.cn">其他宿舍网站</a></li>
            </ul>
        </section>

        <!-- 宿舍成员 -->
        <section id="members">
            <h2>宿舍成员</h2>
            <div class="member">
                <img src="img/img1.webp" alt="成员1">
                <h3>张三</h3>
                <p>专业: 计算机科学</p>
                <p>兴趣: 编程、篮球</p>
                <p>个性签名: 努力就会有收获！</p>
            </div>
            <div class="member">
                <img src="img/img2.webp" alt="成员2">
                <h3>林婉莹</h3>
                <p>专业: 软件技术</p>
                <p>兴趣: 阅读、追剧、追星</p>
                <p>个性签名: 生活不止眼前的苟且，还有诗和远方。</p>
            </div>
            <div class="dorm全家福">
                <img src="dorm全家福.jpg" alt="宿舍全家福">
            </div>
            <div class="dorm-duty-schedule">
                <h3>宿舍值日表</h3>
                <table>
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>值日人员</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>周一</td>
                            <td>张三</td>
                        </tr>
                        <tr>
                            <td>周二</td>
                            <td>李四</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 宿舍生活 -->
        <section id="life">
            <h2>宿舍生活</h2>
            <h3>宿舍公约</h3>
            <ul>
                <li>作息时间：晚上11点前熄灯睡觉</li>
                <li>卫生值日：每天轮流打扫卫生</li>
                <li>用电安全：不使用违规电器</li>
            </ul>
            <h3>宿舍活动</h3>
            <p>我们一起去郊外烧烤，大家分工合作，吃得超开心！</p>
            <h3>宿舍趣事</h3>
            <p>小王总是把袜子藏在枕头底下，结果满屋子都是臭袜子味。</p>
        </section>

        <!-- 宿舍故事 -->
        <section id="stories">
            <h2>宿舍故事</h2>
            <h3>宿舍日记</h3>
            <p>[日期]：今天大家一起为小李庆祝生日，买了蛋糕，唱了生日歌，超级温馨。</p>
            <h3>宿舍回忆</h3>
            <p>毕业季大家一起拍毕业照，留下了美好的回忆。</p>
            <h3>宿舍未来</h3>
            <p>希望大家都能实现自己的梦想，常回宿舍看看。</p>
        </section>

        <!-- 关于我们 -->
        <section id="about">
            <h2>关于我们</h2>
            <p>本网站旨在记录我们的宿舍生活，分享快乐与成长，让大家更好地了解我们的宿舍。</p>
            <p>联系我们：admin@example.com</p>
        </section>
    </main>

    <!-- 底部 -->
    <footer>
        <p>版权信息 &copy; 2025 我的宿舍</p>
        <p>联系方式: admin@example.com</p>
    </footer>

    <script>
        // 轮播图实现
        const slides = document.querySelectorAll('.banner img');
        let currentSlide = 0;

        function showSlide() {
            slides.forEach((slide, index) => {
                if (index === currentSlide) {
                    slide.classList.add('active');
                } else {
                    slide.classList.remove('active');
                }
            });
            currentSlide = (currentSlide + 1) % slides.length;
        }

        setInterval(showSlide, 3000);
    </script>
</body>

</html>